<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://codepen.io/prvnbist/pen/gKParr</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Mukta:700');

        $bg: #f3f8fa;
        $white: #fff;
        $black: #282936;

        @mixin transition($property: all, $duration: 0.45s, $ease: cubic-bezier(0.65,0,.076,1)) {
            transition: $property $duration $ease;
        }

        * {
            box-sizing: border-box;
            &::before, &::after {
                box-sizing: border-box;
            }
        }

        body {
            font-family: 'Mukta', sans-serif;
            font-size: 1rem;
            line-height: 1.5;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            min-height: 100vh;
            background: $bg;
        }

        button {
            position: relative;
            display: inline-block;
            cursor: pointer;
            outline: none;
            border: 0;
            vertical-align: middle;
            text-decoration: none;
            background: transparent;
            padding: 0;
            font-size: inherit;
            font-family: inherit;
            &.learn-more {
                width: 12rem;
                height: auto;
                .circle {
                    @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1));
                    position: relative;
                    display: block;
                    margin: 0;
                    width: 3rem;
                    height: 3rem;
                    background: $black;
                    border-radius: 1.625rem;
                    .icon {
                        @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1));
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        background: $white;
                        &.arrow {
                            @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1));
                            left: 0.625rem;
                            width: 1.125rem;
                            height: 0.125rem;
                            background: none;
                            &::before {
                                position: absolute;
                                content: '';
                                top: -0.25rem;
                                right: 0.0625rem;
                                width: 0.625rem;
                                height: 0.625rem;
                                border-top: 0.125rem solid #fff;
                                border-right: 0.125rem solid #fff;
                                transform: rotate(45deg);
                            }
                        }
                    }
                }
                .button-text {
                    @include transition(all, 0.45s, cubic-bezier(0.65,0,.076,1));
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    padding: 0.75rem 0;
                    margin: 0 0 0 1.85rem;
                    color: $black;
                    font-weight: 700;
                    line-height: 1.6;
                    text-align: center;
                    text-transform: uppercase;
                }
            }
            &:hover {
                .circle {
                    width: 100%;
                    .icon {
                        &.arrow {
                            background: $white;
                            transform: translate(1rem, 0);
                        }
                    }
                }
                .button-text {
                    color: $white;
                }
            }
        }

        @supports (display: grid) {
            body {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-gap: 0.625rem;
                grid-template-areas: ". main main ." ". main main .";
            }

            #container {
                grid-area: main;
                align-self: center;
                justify-self: center;
            }
        }
    </style>
</head>
<body type="pug">
<div id="container">
    <button class="learn-more">
    <span class="circle" aria-hidden="true">
      <span class="icon arrow"></span>
    </span>
        <span class="button-text">Learn More</span>
    </button>
</div>
<script>
    const icons = document.querySelectorAll('.icon');
    icons.forEach (icon => {
        icon.addEventListener('click', (event) => {
            icon.classList.toggle("open");
        });
    });
</script>
</body>
</html>